<template>
  <h1>{{person}}</h1>
  <h2>姓名:{{name}}</h2>
  <h3>年龄: {{age}}</h3>
  <h3>薪资: {{job.j1.salary}}</h3>
  <br />
  <button @click="name += '~'">姓名</button>
  <button @click="age++">年龄</button>
  <button @click="job.j1.salary++">薪资</button>

</template>
<script>
import { reactive,toRef,toRefs,shallowReactive,shallowRef } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    return {
      person,
      ...toRefs(person)
      // fullName
    };
  },
};
</script>